<template>
	<view class="content">
		<view class="search-box">
			<u-search @search="load(1)" @custom="load(1)" v-model="keywords" class="search-box-u-search" shape="square" placeholder="搜索知识点" :clearabled="true" :animation="true"></u-search>
		</view>
		<view class="kbs-list">
			<view class="kbs-item" v-for="(item, index) in res" :key="index" v-if="(!showKbsMore && index < 6) || showKbsMore">
				<block v-if="!item.url">
					<navigator :url="'/pages/workorder/kbs-info?id=' + item.id + '&category=' + id" class="kbs-info">
						<text class="kbs-id">{{index + 1}}.</text>{{item.title}}
					</navigator>
				</block>
				<block v-else>
					<u-parse :html="item.html"></u-parse>
				</block>
			</view>
			<view v-if="!showKbsMore && res.length > 6" @click="showKbsMore = true" class="kbs-more">
				<text class="kbs-more-text">查看更多内容</text>
				<image class="kbs-more-img" src="/static/icon/arrow-down.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="kbs-title">提交您的问题</view>
		<view class="solution">
			<view @click="goChannel(item.url, item.identifier)" hover-class="solution-item-hover" v-for="(item, index) in channel" :key="index" class="solution-item">
				<image class="solution-logo" :src="item.logo_image"></image>
				<view class="solution-info">
					<view class="solution-title">{{item.title}}</view>
					<view class="solution-introduce">{{item.desc}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				keywords: '',
				showKbsMore: false,
				res: [],
				channel: []
			}
		},
		onLoad(query) {
			this.id = query.id ? query.id:0
			this.load(1)
		},
		methods: {
			load: function (page = 1) {
				var that = this
				that.$u.api.kbs({
					category: that.id,
					keywords: that.keywords
				}).then(res => {
					if (res.code == 1) {
						that.res = res.data.res
						for (let r in res.data.res) {
							res.data.res[r].html = res.data.res[r].url ? '<a style="color:#303133;" href="' + res.data.res[r].url + '"><span>' + (parseInt(r) + 1) + '.</span> ' + res.data.res[r].title + '</a>':'';
						}
						that.channel = res.data.channel
					} else {
						that.$u.toast(res.msg);
					}
				}).catch(res => {
					that.$u.toast('请求失败，请重试！');
				})
			},
			goChannel: function (url, identifier) {
				if (identifier == 'create') {
					uni.navigateTo({
						url: '/pages/workorder/create?category=' + this.id
					})
				} else if (identifier == 'kefu') {
					uni.navigateTo({
						url: '/pages/kefu/kefu?category=' + this.id
					})
				}
			}
		}
	}
</script>

<style>
.search-box {
	margin: 20rpx auto;
	width: 92%;
}
.search-icon {
	padding: 0 10rpx;
}
.search-input {
	font-size: 30rpx;
	width: 100%;
}
.solution-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
}
.solution-item-hover {
	background: #f8f8f8;
}
.solution-logo {
	width: 120rpx;
	height: 120rpx;
	min-width: 120rpx;
	min-height: 120rpx;
	padding-right: 20rpx;
}
.solution-title {
	font-size: 30rpx;
	font-weight: bold;
}
.solution-introduce {
	font-size: 28rpx;
	color: #888;
}
.kbs-title {
	font-size: 30rpx;
	font-weight: bold;
	padding: 30rpx 20rpx 0 20rpx;
}
.kbs-list {
	padding: 0 20rpx;
}
.kbs-item {
	font-size: 30rpx;
	padding: 20rpx 0;
	border-bottom: 1px solid #EBEBEB;
}
.kbs-id {
	padding-right: 10rpx;
}
.kbs-more {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
}
.kbs-more-img {
	height: 30rpx;
	width: 30rpx;
	margin: 0 10rpx;
}
.kbs-more-text {
	color: #1a1a1a;
	font-size: 30rpx;
}
</style>
